<template>
	<div class="common-layout">
		<el-container>
			<el-header> <layout-header></layout-header></el-header>
			<el-container>
				<el-aside width="220px"><layout-menu /></el-aside>
				<el-container>
					<el-main>
						<el-scrollbar>
							<router-view v-slot="{ Component }"> <component :is="Component" /> </router-view>
						</el-scrollbar>
					</el-main>
					<el-footer>Footer</el-footer>
				</el-container>
			</el-container>
		</el-container>
	</div>
</template>

<script setup>
import LayoutHeader from './layout-header/index'
import LayoutMenu from './layout-menu/index'
</script>
<style lang="scss" scoped>
.common-layout {
	position: relative;
	height: 100vh;

	.el-menu {
		border-right: none;
	}
	.el-header {
		padding: 0;
		height: 68px;
		display: flex;
		align-items: center;
	}
	// .el-main {
	// 	padding: 20px;
	// }
}
</style>
